<template>
  <!-- 分页 -->
  <nav id="pagination">
    <div class="pagination">
      <!-- 前省略号及起始页 -->
      <span v-if="Number(pageIndex) > 3 && Number(pageTotal) > 5">
        <a class="page-number" href="javascript:void(0);" @click="pageIndexChange(1)">1</a>
        <span v-if="Number(pageIndex) !== 4" class="space">…</span>
      </span>
      <!-- 当前页及前后两页 -->
      <a class="page-number" href="javascript:void(0);"
         :class="['page-number' , Number(index) === Number(pageIndex) ? 'current' : '']"
         v-for="index in visiblePages" :key="index"
         @click="pageIndexChange(index)">{{ index }}</a>
      <!-- 后省略号及结束页 -->
      <span v-if="Number(pageIndex) < Number(pageTotal) - 2 && Number(pageTotal) > 5">
        <span v-if="Number(pageIndex) !== Number(pageTotal) - 3" class="space">…</span>
        <a class="page-number" href="javascript:void(0);"
           @click="pageIndexChange(Number(pageTotal))">{{ Number(pageTotal) }}</a>
      </span>
      <!-- 翻页按钮 -->
      <a v-if="Number(pageIndex) !== 1" class="extend prev" rel="prev" href="javascript:void(0);"
         @click="pageBackward">
        <i class="haofont hao-icon-chevron-left fa-fw"></i>
        <div class="pagination_tips_prev">上页</div>
      </a>
      <a v-if="Number(pageIndex) !== Number(pageTotal)" class="extend next" rel="next" href="javascript:void(0);"
         @click="pageForward">
        <div class="pagination_tips_next">下页</div>
        <i class="haofont hao-icon-chevron-right fa-fw"></i>
      </a>
      <!-- 跳转输入框 -->
      <div class="toPageGroup">
        <input id="toPageText" maxlength="3" title="跳转到指定页面" v-model="pageIndexText"
               @input="(event) => {event.target.value=event.target.value.replace(/[^0-9]/g,'')}"
               @keyup="(event) => {if (event.target.value === '0' || event.target.value === 0) event.target.value = ''}"
               @blur="pageIndexTextChange">
        <a id="toPageButton" @click="pageIndexTextChange">
          <i class="haofont hao-icon-angles-right"></i>
        </a>
      </div>
    </div>
  </nav>
</template>

<script setup>
import {defineProps, defineEmits, ref, computed} from 'vue';

const props = defineProps({
  // 总条数
  dataCount: {
    required: true,
    type: Number
  },
  // 当前页
  pageIndex: {
    type: Number,
    default: 1
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 10
  },
})
const emit = defineEmits(['update:pageIndex', 'pageIndexChange', 'pageSizeChange']);

const pageIndexText = ref("");

const pageTotal = computed(() => Math.ceil(props.dataCount / props.pageSize));

const pageIndexChange = (pageIndex) => {
  // 触发 update:pageIndex 事件，以便 v-model 反向更新值
  emit('update:pageIndex', pageIndex);
  emit('pageIndexChange');
}

const pageBackward = () => {
  pageIndexChange(props.pageIndex - 1);
}

const pageForward = () => {
  pageIndexChange(props.pageIndex + 1);
}

const pageIndexTextChange = () => {
  if (pageIndexText.value) {
    pageIndexChange(Number(pageIndexText.value));
    pageIndexText.value = "";
  }
}

const visiblePages = computed(() => {
  let start = Math.max(1, props.pageIndex - 2);
  let end = Math.min(pageTotal.value, start + 4);
  if (pageTotal.value - start < 4) {
    end = pageTotal.value;
    start = Math.max(1, end - 4);
  }
  const pages = [];
  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
});

</script>

<style scoped>
</style>